<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html">
	
<ui:composition template="#{facesContext.externalContext.request.contextPath}/templates/main_template.xhtml">

	<ui:param name="bean" value="#{indexBean_wordchat}" />

	<ui:define name="customCSS">
		<link rel="stylesheet" href="#{facesContext.externalContext.request.contextPath}/css/chat/wordchat/wordchat.css" />
	</ui:define>

	<ui:define name="customJS">
		<script src="#{facesContext.externalContext.request.contextPath}/js/chat/wordchat/wordchat.js" />
	</ui:define>
	
	<ui:define name="templateHeader">
		<h1>Web Meeting System - Word Chat</h1>
	</ui:define>

	<ui:define name="templateContent">
	
		<h:form id="loginForm">
			<h:outputLabel id="headerMsg" class="headerMsg" value="#{bean.headerMsg}"></h:outputLabel>
			
			<div id="loginDiv">
				<!-- Login form -->
				<h:panelGrid columns="2" styleClass="mm-form-table" columnClasses="mm-form-alignment-left,mm-form-alignment-right">
					<h:outputLabel for="username" value="username"></h:outputLabel>
					<h:inputText id="username" value="#{bean.username}" class="ui-input-text ui-body-c ui-corner-all ui-shadow-inset ui-focus"></h:inputText>
					<h:outputLabel for="password" value="password"></h:outputLabel>
					<h:inputSecret id="password" value="#{bean.password}"></h:inputSecret>
				</h:panelGrid>
				
				<!-- Login function, which need to be called by an ajax call -->
				<h:inputHidden id="loginFunc" value="#{bean.login}"></h:inputHidden>
			</div>
			
			<div id="chatDiv">
				<div id="MsgArea">
					<h:panelGrid columns="2" styleClass="mm-form-table" columnClasses="onlineUserList,chatMsg">
						<textarea id="onlineUserList" readonly="readonly" style="height:300px;" class="onlineUserList"></textarea>
						<h:inputTextarea id="chatMsg" readonly="true" style="height:300px;" class="chatMsg"></h:inputTextarea>
					</h:panelGrid>
				</div>
				<div id="chatMsgArea">
					<h:panelGrid columns="2" styleClass="mm-form-table" columnClasses="chatArea,chatBtn">
						<h:inputTextarea id="chatArea" style="height:60px;" class="chatArea" onkeydown="wordChat.sendMsgEnter(event);"></h:inputTextarea>
						<h:commandButton id="chatBtn" value="Send">
							<f:ajax event="click" onevent="function(data) {wordChat.sendMsg(data);}"></f:ajax>
						</h:commandButton>
					</h:panelGrid>
				</div>
			</div>

			<div id="loginBtn">
				<h:commandButton value="Login">
					<f:ajax event="click" execute="username password loginFunc" render="headerMsg username loginFunc" onevent="function(data) {wordChat.login(data, '#{facesContext.externalContext.request.serverName}');}"></f:ajax>
				</h:commandButton>
			</div>
			
			<div id="logoutBtn">
				<h:commandButton value="Logout">
					<f:ajax event="click" onevent="function(data) {wordChat.logout(data);}"></f:ajax>
				</h:commandButton>
			</div>
		</h:form>
		
		<script type="text/javascript">
			/**
			 * Initialize the page when first loaded
			 */
			$(document).ready(function() {
				$("#logoutBtn").hide();
				$("#chatDiv").hide();
			});
		</script>

	</ui:define>

</ui:composition>

</html>